<template>
  <!-- 视频播放 -->
<!--  <button @click="isFullScreen = true">打开全屏对话框</button>-->
  <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" style="margin-top: 100px;"
             :height="dialogHeight" width="700px"  append-to-body @close="close">
<!--    <button @click="isFullScreen = true">打开全屏对话框</button>-->
<!--    <el-row :gutter="10" class="mb8">-->
<!--    </el-row>-->
    <div id="video-container">

    </div>

<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </el-dialog>
</template>

<script>
  import { getEzAccessToken, getVideo } from "@/api/site/video/video";
  import EZUIKit from "@/plugins/ezuikit";

  export default {
    name: 'videoPlayer',
    data() {
      return {
        id: null,
        dialogHeight: '900px',
        // 遮罩层
        visible: false,
        title: null,
        data: null,
        token: null,
        ezvizPlay: null,
        // 记录对话框打开的次数
        dialogOpenCount: 0,
        // 设置对话框最多可以打开的次数
        maxDialogOpenCount: 3,
      }
    },
    methods: {
      // 显示弹框
      show(id) {
        // 增加打开次数
        console.log("打开次数：" + this.dialogOpenCount);
        if (this.dialogOpenCount >= this.maxDialogOpenCount) {
          this.$modal.msgError("同时观看人数达到最大限制，无法打开视频监控");
        } else {
          this.dialogOpenCount++;
          this.id = id;
          this.getToken();
        }
      },
      getToken() {
        getEzAccessToken().then(response => {
          this.token = response.msg;
          this.getVideo();
        });
      },
      getVideo() {
        getVideo(this.id).then(response => {
          this.data = response.data;
          this.title = this.data.name;
          this.initVideo();
          this.visible = true;
        });
      },
      initVideo(){
        let themeData = {
          "header": {
            "color": "#1890ff",
            "activeColor": "#FFFFFF",
            "backgroundColor": "#000000",
            "btnList": [
              {
                "iconId": "deviceID",
                "part": "left",
                "defaultActive": 0,
                "memo": "顶部设备序列号",
                "isrender": 0
              },
              {
                "iconId": "deviceName",
                "part": "left",
                "defaultActive": 0,
                "memo": "顶部设备名称",
                "isrender": 0
              },
              {
                "iconId": "cloudRec",
                "part": "right",
                "defaultActive": 0,
                "memo": "云存储",
                "isrender": 0
              },
              {
                "iconId": "rec",
                "part": "right",
                "defaultActive": 0,
                "memo": "SD卡回放",
                "isrender": 0
              }
            ]
          },
          "footer": {
            "color": "#FFFFFF",
            "activeColor": "#1890FF",
            "backgroundColor": "#00000021",
            "btnList": [
              {
                "iconId": "play",
                "part": "left",
                "defaultActive": 1,
                "memo": "播放",
                "isrender": 1
              },
              {
                "iconId": "capturePicture",
                "part": "left",
                "defaultActive": 0,
                "memo": "截屏按钮",
                "isrender": 1
              },
              {
                "iconId": "sound",
                "part": "left",
                "defaultActive": 0,
                "memo": "声音按钮",
                "isrender": 1
              },
              {
                "iconId": "pantile",
                "part": "left",
                "defaultActive": 0,
                "memo": "云台控制按钮",
                "isrender": 1
              },
              {
                "iconId": "recordvideo",
                "part": "left",
                "defaultActive": 0,
                "memo": "录制按钮",
                "isrender": 1
              },
              {
                "iconId": "talk",
                "part": "left",
                "defaultActive": 0,
                "memo": "对讲按钮",
                "isrender": 1
              },
              {
                "iconId": "zoom",
                "part": "left",
                "defaultActive": 0,
                "memo": "电子放大",
                "isrender": 1
              },
              {
                "iconId": "hd",
                "part": "right",
                "defaultActive": 0,
                "memo": "清晰度切换按钮",
                "isrender": 1
              },
              {
                "iconId": "webExpend",
                "part": "right",
                "defaultActive": 0,
                "memo": "网页全屏按钮",
                "isrender": 1
              },
              {
                "iconId": "expend",
                "part": "right",
                "defaultActive": 0,
                "memo": "全局全屏按钮",
                "isrender": 1
              }
            ]
          }
        };
        this.ezvizPlay = new EZUIKit.EZUIKitPlayer({
          id: `video-container`,
          url: this.data.urlLiveHd,
          accessToken: this.token,
          audio:0,
          themeData: themeData,
          // template: "pcLive",
          // useHardDev: true
        });
        // this.ezvizPlay.closeSound();
      },
      close() {
        if (this.ezvizPlay) {
          this.ezvizPlay.stop();
          this.ezvizPlay.destroy();
          this.ezvizPlay = null;
          this.dialogOpenCount--;
        }
      }
    }
  }
</script>
